<script setup>
  import {onMounted, reactive, ref} from "vue";
  import {getCodeImg} from "@/api/login";
  import {useUserStore} from "@/store/modules/user";
  import {encrypt} from "@/utils/encrypt.ts";
  import {useRouter} from "vue-router";

  const router = useRouter()
  const store = useUserStore()
  const loginForm = reactive({
    username: '',
    password: '',
    code: '',
    uuid: ''
  })

  const codeUrl = ref('')
  const getCode = () => {
    getCodeImg().then(res => {
      loginForm.uuid = res.data.uuid
      codeUrl.value = res.data.img
    })
  }
  onMounted(() => {
    getCode()
  })

  const loading = ref(false)
  const ruleForm = ref(null)
  const handleLogin = () => {
    ruleForm.value.validate((valid) => {
      const user = {
        username: loginForm.username,
        password: loginForm.password,
        code: loginForm.code,
        uuid: loginForm.uuid
      }
      user.password = encrypt(user.password)
      if (valid) {
        loading.value = true
        store.Login(user).then(() => {
          loading.value = false
          router.push({path: '/'})
        }).catch(() => {
          loading.value = false
          getCode()
        })
      }
    })
  }
  const rules = reactive({
    username: [
      {required: true, trigger: 'blur', message: '用户名不能为空'},
      {min: 3, message: '用户名不能小于3个字符', trigger: 'blur'}
    ],
    password: [
      {required: true, trigger: 'blur', message: '密码不能为空'},
      {min: 6, message: '密码长度不能小于6个字符', trigger: 'blur'}
    ],
    code: [
      {required: true, trigger: 'blur', message: '验证码不能为空'}
    ]
  })
</script>
<template>
  <div class="home-container">
    <div class="left-container">
      <div class="left-title">
        <div class="big-title">地震监测平台</div>
      </div>
    </div>
    <div class="right-container">
      <div class="login-container">
        <div class="login-title">
          <div class="small-title">登录</div>
        </div>
        <div class="form-container">
          <el-form :model="loginForm" :rules="rules" ref="ruleForm">
            <el-form-item prop="username">
              <el-input v-model="loginForm.username" style="letter-spacing:10px" @keyup.enter.native="handleLogin" placeholder="请输入用户名"/>
            </el-form-item>
            <el-form-item prop="password">
              <el-input v-model="loginForm.password" type="password" @keyup.enter.native="handleLogin" show-password placeholder="请输入密码"/>
            </el-form-item>
            <el-form-item prop="code">
              <el-row :gutter="20">
                <el-col :span="12">
                  <el-input v-model="loginForm.code" @keyup.enter.native="handleLogin"/>
                </el-col>
                <el-col :span="12">
                  <img :src="codeUrl" class="captcha" @click="getCode"/>
                </el-col>
              </el-row>
            </el-form-item>
            <el-form-item>
              <el-button type="primary"
                         @keyup.enter.native="handleLogin"
                         color="#1b9caa"
                         style="width:100%;height:40px;font-weight:bolder;border: none;font-size: 16px;"
                         :loading="loading" @click="handleLogin">登录
              </el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
  </div>
</template>
<style lang="scss" scoped>
  @import '@/assets/styles/variables.scss';

  .home-container {
    position: fixed;
    left: 0;
    top: 0;
    background-size: cover;
    width: 100%;
    height: 100%;
    display: flex;
    background-image: url("../assets/images/login-bg.png");

    .left-container {
      width: 60%;

      .left-title {
        color: #fff;
        position: relative;
        top: 40%;

        .big-title {
          font-size: 50px;
          font-weight: bolder;
          letter-spacing: 6px;
          background: linear-gradient(130deg, #FFFFFF 40%, rgba(255, 255, 255, 0) 100%);
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
        }
      }
    }

    .right-container {
      width: 40%;
      background: linear-gradient(180deg, rgba(16, 52, 57, 0) 0%, #103439 52%, rgba(16, 52, 57, 0) 100%);
      border-left: 2px solid;
      border-image: linear-gradient(180deg, rgba(0, 255, 255, 0), rgba(0, 255, 255, .8), rgba(0, 255, 255, 0)) 2 2;

      .login-container {
        width: 50%;
        max-width: 320px;
        position: relative;
        left: 25%;
        top: 25%;

        :deep(.el-input__password) {
          color: $login-btn-bg-color !important;
        }

        :deep(.el-input__wrapper) {
          background: transparent;
          box-shadow: none;
        }

        :deep(.el-form-item__content) {
          .el-input {
            background: $login-input-bg-color;
            border-radius: 0px 0px 0px 0px;
            opacity: 1;
            border: 2px solid;
            border-image: $login-input-border-image;
            box-shadow: unset;

            .el-input__inner {
              color: $login-btn-bg-color !important;
              font-size: 16px;
              height: 40px;
            }
          }
        }

        .login-title {
          position: relative;
          color: #fff;
          text-align: left;
          margin-bottom: 20px;

          .small-title {
            font-size: 30px;
            text-align: center;
          }
        }

        .form-container {
          input:-webkit-autofill {
            background-color: transparent !important;
          }

          .captcha {
            height: 40px;
            width: 100%;
            float: right;
            background: linear-gradient(
                125deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .2) 100%);
            border-radius: 0;
            opacity: 1;
            border: 2px solid;
            border-image: radial-gradient(circle, rgb(0, 240, 255), rgba(0, 209, 255, 0)) 2 2;
          }

          .el-input {
            .el-input__inner {
              height: 35px;
              background-color: transparent !important;
              background: linear-gradient(
                  125deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .2) 100%);
              border-radius: 0;
              opacity: 1;
              border: 2px solid;
              border-image: radial-gradient(circle, rgb(0, 240, 255), rgba(0, 209, 255, 0)) 2 2;
              box-shadow: unset;
              color: #87f8e9;
              font-size: 16px;
            }
          }
        }
      }
    }
  }
</style>
<style>

</style>
